<template>
  <div class="send">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      background="#cbcbcb"
      left-icon="edit"
      shape="round"
    >
      <template #action>
        <van-button type="primary" size="small" @click="onSearch(value)"
          >发送</van-button
        >
      </template>
    </van-search>
  </div>
</template>

<script>
import comment from './comment'
import { apiTianj, apiReplyy } from '@/api/article.js'
export default {
  // isShow判断是评论还是回复
  props: ['isShow', 'commid'],
  data () {
    return {
      value: '', // 输入框的双向绑定
      tianjList: [], // 添加评论
      replyList: [] // 评论回复
    }
  },
  methods: {
    // 添加评论 给发送添加点击事件 也就是onSearch(value) 封装api发送服务器请求(需要传两个参数) id 可以通过动态路由获取
    // 将接收返回的数据保存起来, 利用emit传递产生到子组件,触发父元素的方法,通过方法,来添加评论this.commentList.unshift(tianjList),清空输入框
    async onSearch (value) {
      if (this.isShow === false) {
        var res
        // 类似模态框的复用
        // console.log('onSearch')
        res = await apiTianj({
          artid: this.$route.params.artid, // 要根据api一样
          content: value
        })
        // console.log(res)
        // 接收返回的评论数据
        this.tianjList = res.data.data.new_obj
        // 将返回的数据通过emit传递到父组件detail中,也就是触发父方法
        this.$emit('main', this.tianjList)
        // 清空输入框
        this.value = ''
      } else {
        // console.log('添加评论的回复')  判断(relly send isShow==true 评论 )    detail send isShow=false 评论回复
        // 得到输入框中的内容,将内容提交到服务器,接收返回来的评论数据,将返回来的数据渲染到send父组件reply中(this.replyList.unshift(newObj)),清空输入框
        res = await apiReplyy({
          commid: this.commid, // commid: 评论的 id
          content: value,
          artid: this.$route.params.artid
        })
        // console.log(this.commid)
        const newObj = res.data.data.new_obj
        this.$emit('addcomment', newObj)
        this.value = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.send {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999;
}
</style>
